<template>
  <h1>订单列表</h1>
  <hr />
  <el-select v-model="value" clearable placeholder="请选择订单状态" @change="change()"  class="m-2"  size="small" style="height: 30px;margin: 20px;" >
          <el-option v-for="item in opaction" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
  <el-table :data="showList" style="width: 100%;"  height="95%">
    <el-table-column prop="orderid" label="订单编号" width="220" />
    <el-table-column prop="proname" label="商品名称" width="250" />
    <el-table-column prop="originprice" label="商品单价" width="90" />
    <el-table-column prop="num" label="商品数量" width="90" />
    <el-table-column prop="img1" label="商品图片" width="240">
      <template #default="scope">
<img :src="scope.row.img1" alt="" style="height: 150px;">
      </template>
    </el-table-column>
    <el-table-column prop="discount" label="折扣" width="80" />
    <el-table-column prop="status" label="订单状态" width="100" >
      <template #default="scope">
        <el-select v-model="scope.row.status" class="m-2"  size="small" :disabled="crud.charAt(3)=='1'?false:true">
          <el-option v-for="item in opaction" :key="item.value" :value="item.value" :label="item.label"/>
        </el-select>
      </template>
       
      </el-table-column>
   
   
    <el-table-column  v-if="crud.charAt(3)=='1'" label="操作" width="90" >
  <template #default="scope">
    <el-button type="primary" @click="editStatus(scope.row)">修改状态</el-button>
  </template>
      
    </el-table-column>
      
  </el-table>
  <el-dialog
    v-model="dialogVisible"
    title="修改状态"
    width="30%"
    :before-close="handleClose"
  >
  <el-form :model="rowdata"  label-width="80px">
  <el-form-item label="用户名称">
      <el-input v-model="rowdata[0].name" disabled />
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="rowdata[0].proname" disabled />
    </el-form-item>
    <el-form-item label="订单状态">
      <el-select v-model="rowdata[0].status">
      <el-option v-for="item in opaction" :key="item.value" :value="item.value"  :label="item.label"/>
        </el-select>
    </el-form-item>
  </el-form>
  
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="editOrder">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
 
</template>

<script lang="ts" setup>
import { reactive,ref, onMounted,computed } from "vue";
import { order_list, order_statusList, order_updateStatus } from "../../../utils/api";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
  onMounted(async () => {
    order_list().then(res=>{
      list.value=[...res.data.data]
    })
})
// //获取页面dom节点
//   const container = ref<HTMLElement>()
//获取空白节点，通过空白节点来判断是否滚动到页面底部
  // const blank = ref<HTMLElement>()
//创建响应式数据用来接收后端数据
  const list = ref<any>([]) 
//设置当前页
  const page = ref(1)
//设置页面最大显示数量
  const limit = 200
//计算页面总数，通过数据总长度除以页面显示最多数量数据
  const maxPage = computed(() => Math.ceil(list.value.length / limit))
  // List of real presentations
//设置要展示的数据数量
  const showList = computed(() => list.value.slice(0, page.value * limit))
//设置事件，用来进行动态页面渲染
// 定义订单数据类型
interface Iorder{
  name:string,
  tel:string,
  province:string,
  city:string,
  addressDetail:string,
  orderid:string,
  status:number,
  proname:string,
  originprice:number,
  num:number
}
// 定义一个状态用来控制表单框的显示隐藏
const dialogVisible = ref(false)
const value = ref('')
const $route=useRoute()
const crud:string=($route.meta.crud as string)
// 当选择框数据发生改变时，触发事件
const change=()=>{
  if(value.value==''){
    order_list().then(res=>{
      list.value=[...res.data.data]
    })
  }else{
    order_statusList({status:value.value}).then(res=>{
    console.log(res.data.code)
    console.log(res.data.data)
    list.value=[...res.data.data]
  })
  }
}
// 定义一个变量用来接收点击行的数据
var rowdata=reactive<Iorder[]>([]);
const editStatus=(str:any)=>{
  console.log(str.status)
  console.log(str.orderid)
// 发送更改订单状态的请求
  order_updateStatus({orderid:str.orderid,status:str.status}).then((res)=>{
      console.log(res.data.code)
      if(res.data.code=="200"){
        ElMessage({
        message: "修改成功！",
        type: "success",
      });
      }
    })
}

const editOrder =()=>{
  console.log(rowdata)
    order_updateStatus({orderId:rowdata[0].orderid,status:rowdata[0].status}).then((res)=>{
      console.log(res.data.code)
      if(res.data.code==200){
      }
    })
    dialogVisible.value=!dialogVisible
}
const handleClose = (done: () => void) => {
  done()
}
const opaction=[
  {
    value:0,
    label:'未支付'
  },
  {
    value:1,
    label:'待发货'
  },
  {
    value:2,
    label:'待收货'
  },
  {
    value:3,
    label:'待收货'
  },
  {
    value:4,
    label:'已评价'
  },{
    value:5,
    label:'未知状态'
  }
]
</script>

<style scoped>
</style>